<template>
	<view class="content">
		<view class="list">
			<view @click="lookDetail(item)" class="item" v-for="(item, index) in list" :key="index">
				<view class="img-v">
					<image mode="widthFix" :src="item.smallImg"></image>
				</view>
				<view class="txt-v">
					<view class="name">{{item.cpName}}</view>
						<view class="otherInfo">类型:{{item.type}}</view>
						<!-- <view class="otherInfo">用餐人数:{{item.peoplenum}}</view> -->
				</view>
			</view>
		</view>
		<view class="getMore" v-if="list.length>0 && !showAll">加载更多数据...</view>
		<view class="getMore" v-if="showAll">已加载全部</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showAll:false,
				type:'',
				cpName:'',
				list:[],
				page:1
			}
		},onLoad(options) {
			this.type = options.type;
			this.cpName = options.cpName;
			let opts = {
				url: 'cookBookNew/cpQuery/'+this.type+'/'+this.cpName+'/1',
				method: 'get'
			};
			let param = {};
			this.baseRequest(opts, param).then(res => {
				uni.hideLoading();
				let rData = res.data;
				this.list = rData.datas;
			}, error => {})
		},onReachBottom() {
			this.page++;
			let opts = {
				url: 'cookBookNew/cpQuery/'+this.type+'/'+this.cpName+'/'+this.page,
				method: 'get'
			};
			let param = {};
			this.baseRequest(opts, param).then(res => {
				uni.hideLoading();
				let rData = res.data;
				for (var i = 0; i < rData.datas.length; i++) {
					this.list.push(rData.datas[i]);
				}
				if(rData.allPage  == this.page){
						this.showAll = true;
				}
			}, error => {})
		},methods:{
			lookDetail(item){
				uni.showLoading({
					mask: true,
					title:''
				})
				uni.setStorageSync('caipuMaterial', item.yl);
				uni.setStorageSync('caipuProcess', item.steps);
				uni.setStorageSync('caipuName', item.cpName);
				uni.navigateTo({
				    url: 'detail'
				});
			}
		}
	}
</script>

<style>
	.list{
		margin: 20rpx;
	}
	.item{
		background-color: #fff;
		padding: 15rpx;
		overflow: hidden;
		border-radius: 15rpx;
		margin-bottom: 15rpx;
	}
	image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 15rpx;
		display: block;
	}
	.item .img-v{
		width: 200rpx;
		height: 200rpx;
		float: left;
	}
	.item .txt-v{
		width: 450rpx;
		margin-left: 15rpx;
		height: 200rpx;
		float: left
	}
	.name{
		font-weight: 800;
	}
	.desc{
		margin-top: 10rpx;
		font-size: 28rpx;
		overflow: hidden;
		color:#333333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.otherInfo{
		color: #e98f36;
		font-size: 26rpx;
		margin-top: 30rpx;
	}
</style>
